<template>
  <div>
    <a-drawer v-model:open="open" title="" width="80%" placement="right">
      <a-space direction="vertical" style="width: 100%" :size="16">
        <div class="layout-flexSpace">
          <a-space wrap>
            <a-typography-title :level="4">{{
              dataInfo.name
            }}</a-typography-title>
            <a-tag color="#108ee9">{{
              dataInfo.isShelf == 1 ? "出售中" : ""
            }}</a-tag>
          </a-space>
          <a-space wrap v-if="dataInfo.isSale != 1">
            <a-popconfirm
              title="是否确定要下架该商品?"
              ok-text="是"
              cancel-text="否"
              v-if="dataInfo.isShelf == 1 && dataInfo.isSale == 0"
              @confirm="handleSell(dataInfo.id, 1)"
            >
              <a-button>下架</a-button>
            </a-popconfirm>
            <template v-if="dataInfo.isSale == 0">
              <a-button type="primary" @click="handleEdit(dataInfo.id)">编辑</a-button>
              <a-popconfirm
                title="是否确定要上架该商品?"
                ok-text="是"
                cancel-text="否"
                v-if="dataInfo.isShelf == 0"
                @confirm="handleSell(dataInfo.id, 2)"
              >
                <a-button>上架</a-button>
              </a-popconfirm>
              <a-popconfirm
                title="是否要删除该数据?"
                ok-text="是"
                cancel-text="否"
                @confirm="confirm(record.id)"
              >
                <a-button type="primary" danger>删除</a-button>
              </a-popconfirm>
            </template>
          </a-space>
        </div>

        <a-descriptions title="" :column="{ xxl: 5 }">
          <a-descriptions-item label="商品编号">{{
            dataInfo.number
          }}</a-descriptions-item>
          <a-descriptions-item label="发布时间">{{
            dataInfo.createdTime
          }}</a-descriptions-item>
          <a-descriptions-item label="商品类目">{{
            dataInfo.typeName
          }}</a-descriptions-item>
          <a-descriptions-item label="子类目">{{
            dataInfo.subTypeName
          }}</a-descriptions-item>
          <a-descriptions-item label="所属品牌">{{
            dataInfo.brandName
          }}</a-descriptions-item>
          <a-descriptions-item
            :label="item.title"
            :key="item.id"
            v-for="item in dataInfo.parametersJSON"
            >{{ item.value }}</a-descriptions-item
          >
          <a-descriptions-item label="商品成色">{{
            dataInfo.fineness
          }}</a-descriptions-item>
          <a-descriptions-item label="商品原价"
            >¥{{ dataInfo.originalPrice }}</a-descriptions-item
          >
          <a-descriptions-item label="出售价格"
            >¥{{ dataInfo.salePrice }}</a-descriptions-item
          >
        </a-descriptions>

        <a-descriptions title="实拍图片：" :column="{ xxl: 10 }">
          <a-descriptions-item
            label=""
            v-for="(item, index) in dataInfo.sampleGraphJSON"
            :key="index"
          >
            <div class="img-item">
              <a-image
                :src="item.imgData"
                :preview="{
                  src: item.imgData,
                }"
                :width="86"
              />
              <div class="img-label">{{ item.label }}</div>
            </div>
          </a-descriptions-item>
        </a-descriptions>

        <a-descriptions title="商品描述：" :column="{ xxl: 1 }">
          <a-descriptions-item label="">
            <a-textarea
              :rows="6"
              v-model:value="dataInfo.content"
              placeholder="此处是该商品的描述！"
              :maxlength="800"
              disabled
            />
          </a-descriptions-item>
        </a-descriptions>
      </a-space>
    </a-drawer>
    <!-- 添加商品 -->
    <add ref="addRef" @reflashList="reflashList"></add>
  </div>
</template>

<script setup>
import add from "./add.vue";
import { editDetail, editStatus, deleteGoods } from "@/api/goods";
import { ref } from "vue";
const open = ref(false);
const dataInfo = ref({});
const goodsId = ref(null)
const seeFunc = (id) => {
  goodsId.value = id
  bindData()
};
const bindData = async () => { 
  const result = await editDetail({ id: goodsId.value });
  if (result.code == 200) {
    open.value = true;
    dataInfo.value = result.data;
  }
}
const addRef = ref(null);
const handleEdit = (id) => {
  addRef.value.addFunc(id, "edit");
}
// 上下架
const handleSell = async (id, status) => {
  const result = await editStatus({ id, status });
  if (result.code == 200) {
    bindData();
  }
};
const confirm = async (id) => {
  const result = await deleteGoods({ id: id });
  if (result.code == 200) {
    message.info("删除成功");
    getGoodsList();
  }
};
defineExpose({ open, seeFunc });
</script>

<style lang="less" scoped>
:deep(.ant-typography) {
  margin: 0 !important;
}
</style>
